<template>
  <div class="contents">
    <PanelTitle title="重点企业" />
    <div class="mt">

      <table>
        <thead>
          <tr>
            <th style="width: 30%;">企业名称</th>
            <th style="width: 10%">企业类型</th>
            <th style="width: 10%;">所在地</th>
            <th style="width: 30%;">详细地址</th>
            <th style="width: 20%;">联系方式</th>
          </tr>
        </thead>
      </table>
      <loopScroll style="height: 18vh; overflow-y: hidden;">
        <table>
          <tbody>
            <tr v-for="item in enterpriseList">
              <td style="width: 30%;">{{ item.name }}</td>
              <td style="width: 10%">
                <div v-if="item.type == 1">种植</div>
                <div v-if="item.type == 2">加工</div>
                <div v-if="item.type == 3">流通</div>
                <div v-if="item.type == 4">自然人</div>
                <div v-if="item.type == 5">其他</div>

              </td>
              <td style="width: 10%;">{{ item.streetName }} {{ item.villageName }}</td>
              <td style="width: 30%;">{{ item.address }}</td>
              <td style="width: 20%;">{{ item.leader }} {{ item.leaderPhone }}</td>
            </tr>
          </tbody>
        </table>
      </loopScroll>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import loopScroll from "@/components/loopScroll.vue";
let enterpriseList = ref([]);

onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/list",
    method: "get",
    params: {
      pageNum: 1,
      pageSize: 8,
      keyEnt: 1,
      yearly: new Date().getFullYear()
    },
  });

  enterpriseList.value =  res.data.list
});
</script>

<style scoped lang="scss">
.contents {
  position: relative;
  z-index: 10;
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.5),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-34);
  }
}

table {
 
  width: 100%;
  text-align: center;
}

th {
  font-weight: bold;
  font-size: vh(13);
  color: #00fff6;
  line-height: vh(24);
}

td {
  font-size: vh(10);
  color: #ffffff;
  line-height: vh(14);
  padding: 4px 0;
}
</style>